<!DOCTYPE html>
<meta charset="utf-16">
<html>
<head>
    <title>Usability pizza</title>
    <!--Header links -->
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <!-- jQuery -->
    <script src="jquery.min.js"></script>
    <!-- sort and filter -->
    <script src="jquery.fastLiveFilter.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="bootstrap.min.js"></script>
</head>
<body>

<div id="wrapper">
    <header>
        <!--<div class="logo">logo</div>-->
 		<div class="top_bar"></div>
		<div class="mid_container">
		<a href="index.html">
			<div class="logo"><img src="i-takeaway%20logo.png" alt="Logo i-Takeaway"></div>
			</a>
			</div>
    </header>

    <nav>
        <p id="restaurant-display">Please choose restaurant</p>

        <form method="get" action="restaurant-choice.html">
            <input type="hidden" name="restaurant" id="restaurant" value="">
            <input class="button" type="submit" value="Back">
        </form>
    </nav>


    <form  class="areaf"method="get" action="end.html">
        <table class="menu-table" id="indian-table">

            <tr>
                <td></td>
                <td><span class="tdHeader">Your Order</span></td>
            </tr>

            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>
    </form>
    <table class="list">
        <tr>
            <td>Food charge:</td>
            <td class="right"><span id="food">&pound; 0.00</span></td>
        </tr>
        <tr>
            <td>Delivery charge:</td>
            <td class="right"><span id="delivery">&pound; 3.99</span></td>
        </tr>
        <tr>
            <td>Total price:</td>
            <td class="right"><span id="total">&pound; 0.00</span></td>
        </tr>
    </table>
    <input type="checkbox" name="tandc" id="tandc" required="true"><label class="tc" for="tandc"><a href="tnc.html"  target="_blank">Terms and Conditions</a>
</label><br/>
    <input class="btn-square" type="submit" value="Proceed"></td></tr>
    </table>

    <div id="footer"></div>
</div>
</body>

<script>
    var dishLst = ['Yakisoba Chicken', 'Miso Salmon', 'Teriyaki Rib Eye Steaks', 'indian Beef Stir-Fry', 'Oyako Donburi', 'Yakitori Don', 'indian Okonomiyaki', 'Soba Noodles w/ Sauce', 'Quick Oyakodon', 'Juicy Chicken'];
    var dishPrice = [5.99, 10.00, 9.00, 10.50, 7.50, 11.50, 8.59, 12.00, 6.50, 7.50];
    var dishTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var totalPrice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var deliveryPrice = 3.99;
var minFree = 15;

window.onload = setMenuTable();

function setMenuTable(){

for (i = 0; i < dishLst.length; i++){
$('#indian-table tr:eq('+(i+1)+') td:eq(0)').html(
"<span class='dish-name'>"+dishLst[i]+"</span><span class='price-text'>£ "+dishPrice[i].toFixed(2)+"</span><span class='add-dish'><button type='button' class='btn btn-square' onclick='addDish("+[i]+")'><span class='glyphicon glyphicon-plus symbol-style'></span>")
}
}

function clearDish(dish){
dishTotal[dish] = 0;
totalPrice[dish] = 0;
var dishP = dish+1;
$('#indian-table tr:eq('+(dishP)+') td:eq(1)').html('');

updatePriceFooter()
}

function addDish(dish){
var btnHtml = "<span class='add-dish'><button type='button' class='btn btn-square' onclick='clearDish("+dish+")'><span class='glyphicon glyphicon-remove symbol-style'></button></span>";
var dishP = dish+1;
dishTotal[dish] ++;
totalPrice[dish] = dishPrice[dish]*dishTotal[dish];

$('#indian-table tr:eq('+(dishP)+') td:eq(1)').html('<span class="output-text">'+dishLst[dish]+' x '+dishTotal[dish]+' = £ '+totalPrice[dish].toFixed(2) +'</span>'+ btnHtml);

updatePriceFooter()
}

function updatePriceFooter(){
var totalFoodPrice = 0;
var finalPrice = 0;
for (i = 0; i < totalPrice.length; i++){
totalFoodPrice = totalFoodPrice + totalPrice[i];}

if (totalFoodPrice == 0){finalPrice=0;
$("#delivery").html("£ " + deliveryPrice.toFixed(2));
}

else if (totalFoodPrice > minFree){finalPrice = totalFoodPrice;
$("#delivery").html("£ 0.00");}

else {finalPrice = totalFoodPrice + deliveryPrice;
$("#delivery").html("£ " + deliveryPrice.toFixed(2));
}


$("#food").html("£ " + totalFoodPrice.toFixed(2));
$("#total").html("£ " + finalPrice.toFixed(2));
}

</script>

<script>
    $(function () {
        $('#search_input').fastLiveFilter('#dishes_list');
    });
</script>

<script>
    function getQueryParams(qs) {
        qs = qs.split("+").join(" ");
        var params = {},
                tokens,
                re = /[?&]?([^=]+)=([^&]*)/g;

        while (tokens = re.exec(qs)) {
            params[decodeURIComponent(tokens[1])]
                    = decodeURIComponent(tokens[2]);
        }

        return params;
    }

    var $_GET = getQueryParams(document.location.search);
    ;
    var restaurant = $_GET["restaurant"];
    if (restaurant != undefined) {
        restaurant = restaurant.charAt(0).toUpperCase() + restaurant.substr(1);
        $('#restaurant').val(restaurant);
        $('#restaurant-display').text(restaurant);
    }
</script>
</html>
